<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <!-- :height="tableHeight" -->
          <el-table
            show-overflow-tooltip

            :data="list"
            style="width: 100%"
            class="card-table"
            :border="false"
            stripe
            :default-sort="{ prop: 'five' }"
          >
            <el-table-column
              show-overflow-tooltip
              label="序号"
              type="index"
              width="50"
              align="center"
            />

            <el-table-column
              show-overflow-tooltip
              label="地址 "
              prop="address"
              min-width="200"
              align="center"
            >
              <template slot-scope="scope">
                <router-link
                  :to="{ path: 'pageDetail', query: { id: scope.row.id } }"
                  class="linkBtn"
                >
                  {{ scope.row.address }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="type"
              :formatter="houseTypeFormat"
              label="类型"
              min-width="100"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              label="户型"
              min-width="100"
              align="center"
            >
              <template slot-scope="scope">
                <span
                  v-if="scope.row.roomNumber"
                >{{ scope.row.roomNumber }}房</span>
                <span
                  v-if="scope.row.wcNumber"
                >{{ scope.row.wcNumber }}卫</span>
                <span
                  v-if="scope.row.carRoomNumber"
                >{{ scope.row.carRoomNumber }}车库</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="ownerName"
              label="业主"
              min-width="100"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              prop="bdName"
              label="BD"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              prop="operatorName"
              label="运营"
              align="center"
              min-width="100"
            />
            <el-table-column
              show-overflow-tooltip
              prop="createdTime"
              label="添加时间"
              :formatter="dateFormatRow"
              sortable
              width="100"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              prop="tag"
              label="标签"
              width="150"
              :formatter="houseTagFormat"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              label="状态"
              prop="status"
              :formatter="houseStatusFormat"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip

              label="操作"
              align="center"
              width="150"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  :disabled="scope.row.status == 0 || scope.row.status > 2"
                  size="small"
                  class="linkBtn"
                  @click="handleClick(scope.row, 1)"
                >交接</el-button>
                <el-button
                  type="text"
                  :disabled="(scope.row.status <= 2 || scope.row.status == 4)|| scope.row.rented == 1"
                  size="small"
                  @click="handleClick(scope.row, 2)"
                >出租</el-button>
                <el-button
                  type="text"
                  :disabled="(scope.row.status <= 2 || scope.row.status == 4)||scope.row.sold == 1 "
                  size="small"
                  @click="handleClick(scope.row, 3)"
                >出售</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            :current-page="listQuery.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <!--          <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />-->

          <!---->
        </div>
      </el-col>
    </el-row>
    <!---->
    <myModal :obj="objMo" @close="close" @save="save">
      <div class="mpdalBody">
        <el-form
          ref="form"
          :model="sizeForm"
          label-width="55px"
          class="formDiv"
        >
          <el-form-item label="" :required="true">
            <el-radio-group v-model="radio">
              <el-radio :label="1">未交割房源</el-radio>
              <el-radio :label="2">在租房源</el-radio>
              <el-radio :label="3">闲置房源</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <p class="text-center caC">
          说明：不同的房产来源走的交接流程不同，请谨慎选择。
        </p>
      </div>
    </myModal>
    <!---->
  </div>
</template>

<script>
import myModal from '@/components/Modal'
import { page } from '@/api/house'
import { leaseAdd } from '@/api/lease'
import { saleAdd } from '@/api/sale'

import {
  addUndeliveredHandoverByHouseId,
  addRentHandoverByHouseId,
  addIdleHandoverByHouseId
} from '@/api/handover'
// import Pagination from '@/components/Pagination/index' // Secondary package based on el-pagination
import {
  replaceParamEmptyString,
  houseTypeFormat,
  houseStatusFormat,
  dateFormatRow,
  houseTagFormat
} from '@/utils/common'

export default {
  components: { myModal },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    myData: {
      type: Object
    },
    mylistQuery:{
      type: Object
    }
  },
  data() {
    return {
      currentPage: 1,
      list: null,
      total: 0,
      listLoading: true,
      tableHeight: 0,
      listQuery: {
        page: 1,
        limit: 10,
        type: null,
        // orderStatus: null,
        // payType: null,
        // buyer: null,
        goodsId: null,
        // organizationId: null
      },
      objMo: {
        show: false,
        title: '选择房产来源',
        width: '536px'
      },
      sizeForm: {},
      radio: 1,
      houseTypeFormat,
      houseStatusFormat,
      houseTagFormat,
      dateFormatRow,
      houseId: ''
    }
  },
  watch: {
    myData(response, bV) {
      this.list = response.data.records
      this.total = response.data.total
      this.listLoading = false
    }
  },
  created() {
    if (
      this.$route.params &&
      this.$route.params.orderType &&
      this.$route.params.orderType !== ':orderType'
    ) {
      this.listQuery.type = this.$route.params.orderType
    }
    if (
      this.$route.params &&
      this.$route.params.goodsId &&
      this.$route.params.goodsId !== ':goodsId'
    ) {
      this.listQuery.goodsId = this.$route.params.goodsId
    }
    this.getList()
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 260
      // 后面100一般是根据你上下导航栏的高度来减掉即可。
    })
  },
  methods: {
    getList() {
      this.listLoading = true
      this.listQuery = replaceParamEmptyString(this.listQuery, [
        'type',
        // 'orderStatus',
        // 'payType',
        'goodsId'
      ])
      page(this.listQuery).then((response) => {
        console.log(response)
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    addUndeliveredHandover(id) {
      addUndeliveredHandoverByHouseId(id).then((response) => {
        console.log(response)
        const houseId = id
        const processId = response.data.id
        const step = response.data.step
        const address = response.data.address
        this.$router.push({
          path: 'pageProcess',
          query: { houseId, processId, step, address }
        })
      })
    },
    addRentHandover(id) {
      addRentHandoverByHouseId(id).then((response) => {
        console.log(response)
        const houseId = id
        const processId = response.data.id
        const step = response.data.step
        const address = response.data.address
        this.$router.push({
          path: 'regroup',
          query: { houseId, processId, step, address }
        })
      })
    },
    addIdleHandover(id) {
      addIdleHandoverByHouseId(id).then((response) => {
        console.log(response)
        const houseId = id
        const processId = response.data.id
        const step = response.data.step
        const address = response.data.address
        this.$router.push({
          path: 'IdleHousing',
          query: { houseId, processId, step, address }
        })
      })
    },
    async handleClick(par, val) {
      if (val === 1) {
        this.houseId = par.id
        if (par.houseSource === 0) {
          this.addUndeliveredHandover(this.houseId)
          return
        } else if (par.houseSource === 1) {
          this.addRentHandover(this.houseId)
          return
        } else if (par.houseSource === 2) {
          this.addIdleHandover(this.houseId)
          return
        }
        this.objMo.show = true
      } else if (val === 2) {
        var detailRes = await leaseAdd(par.id)
        const routerURl = this.$router.resolve({
          path: 'leasepageProcess',
          query: { id: detailRes.data.id }
        })
        window.open(routerURl.href, '_blank')
        // this.$router.push({ path: 'leasepageProcess', query: { id: detailRes.data.id }})
      } else if (val === 3) {
        var saleDetailRes = await saleAdd(par.id)
        const routerURl = this.$router.resolve({
          path: 'salesProcess',
          query: { id: saleDetailRes.data.id }
        })
        window.open(routerURl.href, '_blank')
        // this.$router.push({ path: 'salesProcess', query: { id: saleDetailRes.data.id }})
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.listQuery.page = 1
      this.listQuery.limit = val
       this.$emit('getPageData', this.listQuery)
     // this.getListmylistQuery(this.mylistQuery)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.listQuery.page = val
      
      this.$emit('getPageData', this.listQuery)
    //  this.getListmylistQuery(this.mylistQuery)
    },
    close() {
      this.objMo.show = false
    },
    save() {
      this.objMo.show = false
      if (this.radio === 1) {
        this.addUndeliveredHandover(this.houseId)
      } else if (this.radio === 2) {
        this.addRentHandover(this.houseId)
      } else if (this.radio === 3) {
        this.addIdleHandover(this.houseId)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table th.is-leaf,
::v-deep .el-table td,
::v-deep .el-table__body {
  border: 0;
}
::v-deep .el-table::before,
::v-deep .el-table__fixed-right::before {
  display: none;
}
::v-deep th {
  background: #f7f7f7;
  font-weight: normal;
  color: #101010;
}
</style>
